/*
 * @Author: 自迩
 * @Date: 2022-03-22 20:57:08
 * @LastEditTime: 2022-03-22 21:09:10
 * @LastEditors: your name
 * @Description:
 * @FilePath: \class-ending-homework\src\components\ClassItem\index.jsx
 */
import React from 'react'
import box5 from '../../assets/images/box5.jpeg'

export default function ClassItem(props) {
    const {classObj} = props
  return (
    <div className="class">
        <img src={box5} alt=""/>
        <div>
            <h2>{classObj.className}</h2>
            <p>
                {classObj.classContent}
            </p>
            {classObj.type.map((value)=>{
                let className
                switch(value){
                    case "HTML":
                        className = "label-1"
                        break
                    case "CSS":
                        className = "label-2"
                        break
                    case "JavaScript":
                        className = "label-3"
                        break
                }
                return (<span key={`${classObj.className}-${value}`} className={className}>{value}</span>)
            })}

        </div>
    </div>
  )
}
